function initHeader() {
	const input = document.getElementById("search-text");
	const search_list = document.getElementById("search-list");
	let search_list_item = search_list.getElementsByTagName("li");
	input.onfocus = function (e) {
		search_list.className = (search_list.className === "opend") ? "" : "opend";
	}
	for (let i=0; i<search_list_item.length; i++) {
		search_list_item[i].onclick = function () {
			search_list.className = "";
			input.value = this.innerText;
			input.blur();
		}
	}
}
function showLoginBox() {
	const loginTemplate = document.getElementById("login-template");
	const loginContent = loginTemplate.content;
	// 将模板内容克隆到页面中
	const clone = document.importNode(loginContent, true);
	document.body.appendChild(clone);

	const overlay = document.getElementById("overlay");
	const loginBox = document.getElementsByClassName("login-box")[0];
	const loginBtn = document.getElementById("login-submit");
	loginBtn.onclick = function () {
		const username = document.getElementById("username");
		localStorage.setItem("username", username.value);
		setTimeout(function () {
			window.location.reload();
		}, 500);
	}
	overlay.style.display = 'block';
	loginBox.style.display = 'block';
}
function closeLoginBox() {
	const overlay = document.getElementById("overlay");
	const loginBox = document.getElementsByClassName("login-box")[0];

	document.body.removeChild(overlay);
	document.body.removeChild(loginBox);
}
let curIndex = 0;
let timer = null;
function initAdv() {
	start();
	const adv = document.getElementById("adv-navbar");
	const toggleBtn = document.getElementById("toggle-btn");

	adv.onmouseover = stop;
	adv.onmouseout = start;

	const lis = toggleBtn.getElementsByTagName("li");
	for (let i=0; i<lis.length; i++) {
		(function (j) {
			lis[j].onclick = function () {
				changeImg(j);
			}
		})(i);
	}

	const left_toggle = document.getElementById("left-toggle");
	const right_toggle = document.getElementById("right-toggle");
	left_toggle.onclick = function () {changeImg(curIndex-1 < 0 ? 6 : curIndex-1);}
	right_toggle.onclick = function () {changeImg(curIndex+1 > 6 ? 0 : curIndex+1);}
}
function changeImg(nextIndex) {
	const adv = document.getElementById("adv-navbar");
	const imgs = adv.getElementsByTagName("img");
	const toggleBtn = document.getElementById("toggle-btn");
	const lis = toggleBtn.getElementsByTagName("li");
	if (nextIndex === curIndex) return;
	imgs[curIndex].className = "dispearAdvImg";
	imgs[nextIndex].className = "showAdvImg";
	lis[nextIndex].className = "selected";
	lis[curIndex].className = "";
	curIndex = nextIndex;
}
function stop() {
	clearInterval(timer);
}
function start() {
	timer = setInterval(function () {
		changeImg(curIndex+1 > 6 ? 0 : curIndex+1);
	}, 3000);
}

function goDetail(e) {
	let curTarget = e.currentTarget;
	let mainImg = curTarget.getElementsByTagName("img")[0].getAttribute("src");
	let title = (curTarget.getElementsByTagName("p")[0] || curTarget.getElementsByTagName("h1")[0]).innerText;
	let price = curTarget.getElementsByTagName("em")[0].getElementsByTagName("b")[0].innerText;
	let discount = curTarget.getElementsByTagName("em")[0].getElementsByTagName("b")[1].innerText;
	let shipping = curTarget.getElementsByTagName("em")[0].getElementsByTagName("b")[2].innerText;
	let sealCnt = curTarget.getElementsByTagName("em")[1].getElementsByTagName("b")[1].innerText;
	window.location.href = "./production.html?mainImg="+mainImg+"&title="+title+"&price="+price+"&discount="+discount+"&shipping="+shipping+"&sealCnt="+sealCnt;
}

function doLogout() {
	if (window.confirm("确定退出登录？")) {
		localStorage.removeItem("username");
		window.location.reload();
	}
}
function checkUsername() {
	const username = localStorage.getItem("username");
	const userInfo = document.getElementById("attachment").getElementsByTagName("a")[0];
	if (username) {
		userInfo.addEventListener("click", doLogout);
		userInfo.innerText = username;
	} else {
		userInfo.addEventListener("click", showLoginBox);
	}
}
window.onload = function () {
	initHeader();
	initAsideBar();
	initAdv();
	checkUsername();
}